<template>
  <view>
    <!-- 个人资料 -->
    <view class="top-view">
      <view class="user-row" @click="navToInfo" v-if="token">
        <image :src="userInfo.headimage" class="avatar"></image>
        <view class="name-view">
          <view class="name">{{ userInfo.nickName || "" }}</view>
          <view class="phone">{{ userInfo.phone | maskPhone }}</view>
        </view>
        <view class="right-btn">
          <uni-icons type="right" color="#BBC3D5"></uni-icons>
        </view>
      </view>
      <view class="user-row" @click="toLogin" v-else>
        <view class="name-view">
          <view class="name">登录</view>
          <view class="phone">暂未设置</view>
        </view>
        <view class="right-btn">
          <uni-icons type="right" color="#BBC3D5"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 订单 -->
    <view class="mine-order-card">
      <view class="title-view">
        <view class="title">我的订单</view>
        <view class="right-view" @click="navToMyOrderList('8')">
          <view>全部</view>
          <uni-icons type="right" color="#BBC3D5"></uni-icons>
        </view>
      </view>
      <view class="grid-view">
        <uni-grid :column="4" :showBorder="false" :highlight="false" :square="false">
          <uni-grid-item v-for="item in gridList" :key="item.value">
            <view class="grid-item" @click="navToMyOrderList(item.value)">
              <image :src="item.img" class="icon"></image>
              <view class="text">{{ item.name }}</view>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
    </view>
    <!-- 功能 -->
    <view class="menu-list">
      <uni-list :border="false">
        <uni-list-item thumb="https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/icon_z.png"
          title="在线联系" showArrow link @click="showPhoneDialog"></uni-list-item>
        <uni-list-item thumb="https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/icon_yhq.png"
          title="优惠券" showArrow link @click="toCouponList"></uni-list-item>
      </uni-list>
    </view>

    <uni-popup ref="phonePopup" type="center">
      <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="拨打电话" title="联系电话" content="13572116118"
        @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import * as userInfo from "../../../patientAppPages/common/api/userInfo.js";
import * as loginUtils from "../../../patientAppPages/utils/loginUtils.js";
import { getToken } from "@/utils/auth.js"
import { getUserMessage } from "@/api/feixiang/application.js"
export default {
  data() {
    return {
      userInfo: {},
      countInfo: {},
      roles: "",
      phoneNumber: "13572116118",
      phonePopup: null,
      token: getToken(),
      gridList: [
        {
          name: "待支付",
          value: "0",
          img: "https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/icon_dzf.png",
        },
        {
          img: "https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/icon_fwz.png",
          name: "服务中",
          value: "4",
        },
        {
          name: "已完成",
          value: "7",
          img: "https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/icon_ywc.png",
        },
        {
          name: "已取消",
          value: "5",
          img: "https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/icon_yqx.png",
        }
      ],
    };
  },
  onShow() {
    this.roles = uni.getStorageSync("ROLES");
    console.log("this.roles", this.roles);
  },
  filters: {
    maskPhone(phone) {
      return phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : ""
    }
  },

  mounted() {
    this.roles = uni.getStorageSync("ROLES");
    console.log("this.roles", this.roles);
    this.getUserInfo();
    this.phonePopup = this.$refs.phonePopup;
  },
  methods: {
    toLogin() {
      uni.navigateTo({
        url: "/sickbed/pages/feixiang/login/login"
      })
    },
    toCouponList() {
      uni.navigateTo({
        url: "/nursingWorkerPages/pages/coupon/coupon",
      });
    },
    getUserInfo() {
      const openid = uni.getStorageSync("openid_key");
      const param = {
        openId: openid,
      };
      getUserMessage(param)
        .then((result) => {
          console.log('onghu', result);

          this.userInfo = result.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    dialogClose() {
      console.log("点击关闭");
    },
    dialogConfirm() {
      this.$refs.phonePopup.close();
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber, // 这里填入你要拨打的电话号码
      });
    },
    showPhoneDialog() {
      this.$refs.phonePopup.open();
    },
    hidePhoneDialog() {
      this.$refs.phonePopup.close();
    },
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber, // 这里填入你要拨打的电话号码
      });

      //this.hidePhoneDialog(); // 拨打电话后关闭弹窗
    },
    navToMyOrderList(type) {
      uni.setStorageSync("orderTypeValue", type);
      uni.navigateTo({
        url:
          "/nursingWorkerPages/pages/orderList/orderListMy?orderType=" + type,
      });
    },
    navToInfo() {
      uni.navigateTo({
        url: "/pages/feixiang/login/getMess"
      })
    }
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
  background: #f8f8f8;
}

.top-view {
  width: 100%;
  height: 400rpx;
  // background: url('../../static/mine_nav_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .user-row {
    width: 100%;
    display: flex;
    padding: 0 50rpx;
    box-sizing: border-box;
    margin-top: 170rpx;

    .avatar {
      width: 110rpx;
      height: 110rpx;
      border-radius: 50%;
    }

    .name-view {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 22rpx;

      .name {
        color: #232323;
        font-size: 38rpx;
        font-weight: bold;
      }

      .phone {
        color: rgba(35, 35, 35, 0.5);
        font-size: 14.35px;
      }
    }

    .right-btn {
      display: flex;
      align-items: center;

      .item-go {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}

.mine-order-card {
  border-radius: 20rpx !important;
  margin-top: -80rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  padding: 30rpx;
  box-sizing: border-box;
  background: white;

  .title-view {
    width: 100%;
    display: flex;

    .title {
      flex: 1;
      color: #232323;
      font-size: 28rpx;
      font-weight: bold;
    }

    .right-view {
      display: flex;
      align-items: center;
      color: rgba(35, 35, 35, 0.5);
      font-size: 24rpx;

      image {
        width: 30rpx;
        height: 30rpx;
        margin-left: 4rpx;
      }
    }
  }

  .grid-view {
    margin-top: 20rpx;

    .grid-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .icon {
        width: 48rpx;
        height: 68rpx;
        padding: 15rpx 0;
      }

      .text {
        color: #232323;
        font-size: 24rpx;
        font-weight: 400;
      }

      .grid-dot {
        position: absolute;
        right: 30rpx;
        top: 0;
      }
    }
  }
}

.menu-list {
  margin-top: 20rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  padding: 20rpx;
}

.exit-btn {
  margin-top: 60rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  background: white;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(35, 35, 35, 0.7);
  font-size: 28rpx;
}
</style>
